<template>
  <el-dialog v-if="load" title="备料剩余数量" v-model="visible" append-to-body :close-on-click-modal="false" class="full" :z-index="2000" width="1000px" @close="handleClose">
    <VTable ref="tableRef" v-bind="tableOptions" />
    <template #footer>
      <el-button @click="close">关 闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
const props = defineProps({
  options: { type: Object, default: () => ({}) },
})
const emit = defineEmits(['close', 'success'])

const api = inject('api')
const load = ref(false)
const visible = ref(false)
let loadings = reactive({})
const tableRef = ref()
const type = inject('type')

const tableOptions = reactive({
  showOverflow: false,
  showHeaderOverflow: false,
  size: 'small',
  columns: [
    { field: 'order_no', title: '备料单号', minWidth: 120 },
    { field: 'sku', title: 'SKU', minWidth: 100 },
    { field: 'country_name', title: '国家', minWidth: 100 },
    { visible: type === 3, field: 'sale_name', title: '销售', minWidth: 100 },
    { field: 'num', title: '备料数量', minWidth: 80 },
    { field: 'leave_num', title: '余料数', minWidth: 80 },
    { field: 'pre_factory_time', title: '工厂确认出货时间', minWidth: 140 },
    { field: 'order_create_time', title: '申请时间', minWidth: 140 },
  ],
  proxyConfig: {
    autoLoad: false,
    ajax: {
      query: ({ page, form }) => api.purchaseOrder({ ...form, ...page, type })
    }
  }
})

// 打开弹窗
const open = async (row) => {
  if (!load.value) {
    load.value = true
    await 1
  }
  loadings = reactive({})
  visible.value = true
  nextTick(() => {
    const {sku, country, warehouse_id, sale_id} = row
    tableRef?.value.setForm({sku: [sku], country: [country], warehouse_id: warehouse_id ? [warehouse_id] : [], sale_id: sale_id ? [sale_id] : []})
    tableRef?.value.query()
  })
}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
}

defineExpose({ open })
</script>